/* 全局样式表 */

html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
}

.DToA {
    transform-origin: -85px 0px;
    animation: DToA 3s linear;
    animation-fill-mode : forwards;/*保持结束位置*/
  }
@keyframes DToA {
    from { transform:rotate(-0deg); }
    to { transform:rotate(-90deg); }
}

.DToB {
    transform-origin: 35px 0px;
    animation: DToB 1.5s linear;
    animation-fill-mode : forwards;/*保持结束位置*/
  }
@keyframes DToB {
    from { transform:rotate(0deg); }
    to { transform:rotate(90deg); }
}
.AToD {
  transform-origin: 0px 55px;
  animation: AToD 1.5s linear;
  animation-fill-mode : forwards;/*保持结束位置*/
} 
@keyframes AToD {
  from { transform:rotate(0deg); }
  to { transform:rotate(90deg); }
}
.AToC {
  transform-origin: 0px -105px;
  animation: AToC 3s linear;
  animation-fill-mode : forwards;/*保持结束位置*/
} 
@keyframes AToC {
  from { transform:rotate(0deg); }
  to { transform:rotate(-90deg); }
}

.CToA {
  transform-origin: -45px 0px;
  animation: CToA 1.5s linear;
  animation-fill-mode : forwards;/*保持结束位置*/
} 
@keyframes CToA {
  from { transform:rotate(0deg); }
  to { transform:rotate(90deg); }
}

.CToB {
  transform-origin: 115px 0px;
  animation: CToB 3s linear;
  animation-fill-mode : forwards;/*保持结束位置*/
} 
@keyframes CToB {
  from { transform:rotate(0deg); }
  to { transform:rotate(-90deg); }
}

.BToC {
  transform-origin: 0px -25px;
  animation: BToC 1.5s linear;
  animation-fill-mode : forwards;/*保持结束位置*/
} 
@keyframes BToC {
  from { transform:rotate(0deg); }
  to { transform:rotate(90deg); }
}

.BToD {
  transform-origin: 0px 95px;
  animation: BToD 3s linear;
  animation-fill-mode : forwards;/*保持结束位置*/
} 
@keyframes BToD {
  from { transform:rotate(0deg); }
  to { transform:rotate(-90deg); }
}